<template>
  <el-dialog v-model="visible" :width="450" :before-close="close" top="20vh" title="收货地址">
    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" class="demo-ruleForm">
      <el-form-item label="收货人" prop="name">
        <el-input v-model="ruleForm.name" />
      </el-form-item>
      <!-- prop="address" -->
      <el-form-item label="所在地区">
        <el-cascader placeholder="请选择" v-model="value" :options="cityLists" @change="cityListChange" />
      </el-form-item>
      <el-form-item label="详细地址" prop="detail">
        <el-input v-model="ruleForm.detail" />
      </el-form-item>
      <el-form-item label="手机号码" prop="phone">
        <el-input v-model="ruleForm.phone" />
      </el-form-item>
      <!-- <el-form-item label="邮编" prop="postalCode">
        <el-input v-model="ruleForm.postalCode" />
      </el-form-item> -->
      <el-form-item label=" " label-width="160px">
        <el-button type="danger" @click="save">保存地址</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
export default {
  name: 'address',
  emits: ['done'],
  props: {
    visible: Boolean,
  },
  mounted() {
    this.getCityLists()
  },
  data() {
    return {
      ruleForm: {},
      rules: {
        name: [
          {
            required: true,
            message: '请输入登录用户名',
            trigger: 'blur',
          },
        ],
        address: [
          {
            required: true,
            message: '请选择地址',
            trigger: 'blur',
            type: 'any',
          },
        ],
        detail: [
          {
            required: true,
            message: '请选择详细地址',
            trigger: 'blur',
          },
        ],
        phone: [
          {
            required: true,
            message: '请输入手机号',
            trigger: 'blur',
          },
        ],
        // postalCode: [
        //   {
        //     required: true,
        //     message: '请输入邮编',
        //     trigger: 'blur',
        //   },
        // ],
      },
      // 城市列表
      cityLists: [],
      // 选择的城市
      value: [],
    }
  },
  methods: {
    // 关闭弹窗
    close() {
      this.$emit('done')
      this.value = []
      this.ruleForm = {}
      this.$refs.ruleFormRef.resetFields()
    },
    // 获取城市信息
    getCityLists() {
      this.$http
        .get('city/list')
        .then((res) => {
          if (res.data.code === 200) {
            res.data.data.forEach((item, index1) => {
              this.cityLists.push({
                label: item.name,
                value: item.name,
                cityId: item.cityId,
                children: [],
              })
              if ('child' in item) {
                item.child.forEach((item1, index2) => {
                  this.cityLists[index1].children.push({
                    label: item1.name,
                    value: item1.name,
                    children: [],
                  })
                  if ('child' in item1) {
                    item1.child.forEach((item2) => {
                      this.cityLists[index1].children[index2].children.push({
                        label: item2.name,
                        value: item2.name,
                      })
                    })
                  }
                })
              }
            })
          } else {
            this.$message.error(res.data.message)
          }
        })
        .catch((e) => {
          this.$message.error(e.message)
        })
    },
    cityListChange() {
      console.log(this.value)
    },
    save() {
      this.$refs.ruleFormRef.validate().then(() => {
        let cityId = ''
        this.cityLists.forEach((item) => {
          if (this.value[0] == item.value) {
            cityId = item.cityId
          }
        })
        let send = {}
        if (this.value.length === 3) {
          send = {
            address: {
              city: this.value[2],
              cityId,
              district: this.value[1],
              province: this.value[0],
            },
            detail: this.ruleForm.detail,
            id: 0,
            isDefault: true,
            phone: this.ruleForm.phone,
            realName: this.ruleForm.name,
          }
        } else if (this.value.length === 2) {
          send = {
            address: {
              city: this.value[1],
              cityId,
              district: this.value[1],
              province: this.value[0],
            },
            detail: this.ruleForm.detail,
            id: 0,
            isDefault: false,
            phone: this.ruleForm.phone,
            realName: this.ruleForm.name,
          }
        } else {
          send = {
            address: {
              city: this.value[0],
              cityId,
              district: this.value[0],
              province: this.value[0],
            },
            detail: this.ruleForm.detail,
            id: 0,
            isDefault: false,
            phone: this.ruleForm.phone,
            realName: this.ruleForm.name,
          }
        }
        this.$http
          .post('address/edit', send)
          .then((res) => {
            if (res.data.code === 200) {
              console.log(res.data.data)
              this.$emit('done')
              this.ruleForm = {}
              this.value = []
              this.$message.success('添加成功')
              this.$refs.ruleFormRef.resetFields()
            } else {
              this.$message.error(res.data.message)
            }
          })
          .catch((e) => {
            this.$message.error(e.message)
          })
      })
    },
  },
}
</script>
